<template>
  <div>
    <div class="block">
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="选择时段"
      >
      </el-date-picker>
      <el-button type="primary">查询</el-button>
    </div>
    <div style="margin-top: 10px">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="date"
          label="操作时间"
        width="100">
        </el-table-column>
        <el-table-column
          prop="level1"
          label="水平1值"
          width="80">
        </el-table-column>
        <el-table-column
          prop="rule1"
          label="判定规则"
          width="80">
        </el-table-column>
        <el-table-column
          prop="offset1"
          label="偏差"
          width="80">
        </el-table-column>
        <el-table-column
          prop="level2"
          label="水平2值"
          width="80">
        </el-table-column>
        <el-table-column
          prop="rule2"
          label="判定规则"
          width="80">
        </el-table-column>
        <el-table-column
          prop="offset2"
          label="偏差"
          width="80" >
        </el-table-column>
        <el-table-column
          prop="operator"
          label="操作者"
          width="80">
        </el-table-column>
        <el-table-column
          prop="checker"
          label="审核者"
          width="80">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="80">
        </el-table-column>
        <el-table-column
          label="操作"
          width="200">
          <el-button >新增行</el-button>
          <el-button >删除行</el-button>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-card class="box-card danger-card">
        <div class="other-texts inline-list">
          <div class="list">质控结果：<span style="color: red">失控</span></div>
          <div class="list" style="padding-left: 750px ;margin-top: -1px">
            <el-button type="danger">发送失控处理申请</el-button>
          </div>
        </div><!--other-texts 信息列表-可单独使用--->
      </el-card><!------el-card danger-card 预警卡片 -->
    </div>
    <div style="padding-left: 300px;width: 500px;height: 300px" >
      <p class="table_p">填写可能原因</p>
      <el-checkbox-group v-model="checkList">
        <div style="width: 500px;">
          <el-checkbox label="试剂"></el-checkbox>
          <el-checkbox label="质控品"></el-checkbox>
          <el-checkbox label="仪器设备"></el-checkbox>
        </div>
        <div style="width: 500px;">
          <el-checkbox label="环境温度湿度"></el-checkbox>
          <el-checkbox label="水质"></el-checkbox>>
        </div>
        <div style="width: 500px;">
          <el-checkbox label="其他"></el-checkbox>
          <input v-model="input" placeholder="请填写具体内容" style="margin-left: 10px"/>
        </div>
      </el-checkbox-group>
      <br/>
      <br/>
      <br/>
      <div style="width: 500px;padding-left: 300px">
        <el-button>取消</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'dataTable',
  data(){
    return{
      value1:'',
      tableData:[],
      checkList: '',
      input: ''
    }
  },
  created() {
    this.getQualityData();
  },
  methods:{
    getQualityData(){
      let row={
        date:'20210908',
        level1:'30.59',
        rule1:'1-2s',
        offset1:'-12',
        level2:'30.59',
        rule2:'1-2s',
        offset2:'-12',
        operator:'孙新',
        checker:'李武',
        state:'在控'
      }
      for (let i = 0; i <10 ; i++) {
        this.tableData.push(row)
      }
    }
  }
}
</script>

<style scoped>
.table_p {
  background: rgb(72 120 231);
  width: 500px;
  color: rgb(185 204 245);
  height: 40px;
  font-size: 20px;
  padding-top: 5px
}
</style>

